<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.slide{position:relative;width: 320px;height: 480px;overflow: hidden;}
			.slide img{width: 320px;height: 100%;float: left;}
			.img-box{height:100%;width: 1000px;}
			.img-box::after{content: "";display: block;overflow: hidden;clear: both;}
		</style>
	</head>
	<body>
		<div class="slide">
			<div class="img-box" id="img-box">
				<img src="./images/1.jpg">
				<img src="./images/2.jpg">
				<img src="./images/3.jpg">
			</div>
		</div>
		<script type="text/javascript">
			// 第一步：布局，让图片横向排列，加一个父级，让父级宽度比所有图片宽度之和要宽。
			// 第二步：让图片每次切换一个，向左或向右，每次移动一张图片的宽度。
			var imgBox = document.getElementById('img-box');
			console.dir(imgBox);
			var marginLeftValue = 0;
			setInterval(function(){
				if(marginLeftValue < 3){
					imgBox.style.transition = '0.4s linear 0.2s';
					imgBox.style.marginLeft = '-'+ (marginLeftValue++) * 320 +'px';
				}else{
					imgBox.style.transition = '0s';
					marginLeftValue = 0;
					imgBox.style.marginLeft = '0px';
					
				}
				console.log(marginLeftValue);
			},2000);
		</script>
	</body>
</html>